﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="~/layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="~/layuimini/css/public.css" media="all">
    <style>
        body {
            background-color: #fff;
        }

        .img-wrap {
            position: relative;
            width: 90px;
            height: 90px;
            float: left;
            margin-right: 10px;
        }

            .img-wrap .close {
                position: absolute;
                top: 0px;
                right: 0px;
                z-index: 100;
                width: 30px;
                height: 30px;
                background-color: #ff3300;
                font-size: 20px;
                font-weight: bold;
                color: #fff;
                text-align: center;
                border-radius: 64%;
                cursor: pointer;
            }

            .img-wrap > img {
                width: 100%;
                height: 100%;
            }
    </style>
</head>
<body>
    <div class="layui-form layuimini-form">


        <div class="layui-form-item ">
            <label class="layui-form-label required">商品名称</label>
            <div class="layui-input-block">
                <input type="text" name="commodityName" lay-verify="required" lay-reqtext="商品名称不能为空" placeholder="请输入角色名称" value="" class="layui-input">

            </div>
        </div>
        <!--商品图片上传-->
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="ID-upload-demo-btn-2">
                <i class="layui-icon layui-icon-upload"></i> 多图片上传
            </button>
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
                预览图：
                <div class="layui-upload-list" id="upload-demo-preview"></div>
            </blockquote>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">商品图片</label>
            <div class="layui-input-block">
                <input type="text" name="imgUrl" disabled class="layui-input">
            </div>
        </div>
        <!--商品图片上传 end-->


        <div class="layui-form-item ">
            <label class="layui-form-label required">商品规格</label>
            <div class="layui-input-block">
                <input type="text" name="specification" placeholder="请输入商品规格" value="" class="layui-input">

            </div>
        </div>
        <div class="layui-form-item ">
            <label class="layui-form-label required">单位</label>
            <div class="layui-input-block">
                <input type="text" name="unit" placeholder="请输入单位" value="" class="layui-input">

            </div>
        </div>

        <div class="layui-form-item ">
            <label class="layui-form-label required">价格</label>
            <div class="layui-input-block">
                <input type="text" name="money" placeholder="请输入价格" value="" class="layui-input">

            </div>
        </div>
        <div class="layui-form-item ">
            <label class="layui-form-label required">警告库存</label>
            <div class="layui-input-block">
                <input type="text" name="warningNum" placeholder="请输入警告库存" value="" class="layui-input">

            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label ">描述</label>
            <div class="layui-input-block">
                <input type="text" name="description" placeholder="请输入描述" value="" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label ">分类</label>
            <div class="layui-input-block">
                <select name="product_TypeId" id="product_TypeId">
                    <option value=""></option>
                </select>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>

            </div>
        </div>
    </div>
    <script src="~/layuimini/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script>
        layui.use(['form'], function () {
            var form = layui.form;
            var layer = layui.layer;
            var upload = layui.upload;
            var element = layui.element;
            var $ = layui.$;

            // 单图片上传
            var uploadInst = upload.render({
                elem: '#ID-upload-demo-btn',
                url: '/API/File/Upload', // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                before: function (obj) {
                    // 预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                    });

                    element.progress('filter-demo', '0%'); // 进度条复位
                    layer.msg('上传中', { icon: 16, time: 0 });
                },
                done: function (res) {
                    // 若上传失败
                    if (res.code != 200) {
                        return layer.msg('上传失败');
                    }
                    // 上传成功的一些操作
                    // …
                    img = res.data;
                    $("input[name='logo']").val(res.data);//把图片的id赋值给Logo输入框
                    $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
                },
                error: function () {
                    // 演示失败状态，并实现重传
                    var demoText = $('#ID-upload-demo-text');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                },
                // 进度条
                progress: function (n, elem, e) {
                    element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                    if (n == 100) {
                        layer.msg('上传完毕', { icon: 1 });
                    }
                }
            });

            // 多图片上传
            upload.render({
                elem: '#ID-upload-demo-btn-2',
                url: '/API/File/Upload', // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                multiple: true,
                before: function (obj) {
                    //// 预读本地文件示例，不支持ie8
                    //obj.preview(function (index, file, result) {
                    //    $('#upload-demo-preview').append('<img src="' + result + '" alt="' + file.name + '" style="width: 90px; height: 90px;">')
                    //});
                },
                done: function (res) {
                    // 上传完毕
                    // …
                    // 调用接口显示图片真正上传到服务器才显示
                    if (res.code == 200) {
                        const imgId = res.data;//图片的id
                        const url = `/API/File/Download/${imgId}`;//拼接下载接口
                        //显示图片
                        const imgTemp = `
                                                       <div class="img-wrap">
                                                            <span class="close" id="${imgId}">&times;</span>
                                                            <img src="${url}">
                                                       </div>
                                                                     `;
                        $('#upload-demo-preview').append(imgTemp)


                        //把图片id放到表单输入框这样提交表单时一同提交到接口
                        var imgUrl = $("input[name='imgUrl']").val() + ',' + res.data; //先获取然后拼接逗号，这里为
                        //要把第一个逗号去掉，不然取出来的时候会多一个null图片
                        imgUrl = imgUrl.replace(/^,/, "");
                        $("input[name='imgUrl']").val(imgUrl);//把id赋值给imgUrl输入框
                    }
                }
            });

            //删除上传的图片
            $("#upload-demo-preview").on("click", "span", function (e) {
                console.log("进删除方法")
                const imgId = e.target.id;//获取被删除的img标签的图片id
                let imgUrl = $("input[name='imgUrl']").val();//获取输入框里面现有的id
                let imgIds = imgUrl.split(',');//把输入框里的图片id切分成数组
                imgIds = imgIds.filter(x => x != imgId);//通过filter方法返回不等于被删除的图片id的集合
                imgUrl = imgIds.join(','); //用join把数组以逗号转成字符串
                $("input[name='imgUrl']").val(imgUrl);

                $(this).parent().remove();

            });



            //通过Ajax去获取下拉列表数据进行血染
            $.ajax({
                url: "/Admin/ProductType/GetProductType",
                type: "get",
                success: function (res) {
                    console.log("接口返回的结果", res);

                    //父级部门数据

                    for (var i = 0; i < res.data.length; i++) {
                        $("#product_TypeId").append(' <option value="' + res.data[i].id + '">' + res.data[i].product_TypeName + '</option>');
                    }

                    //调用form重写血染select
                    form.render('select');
                }
            });

            //监听提交
            form.on('submit(saveBtn)', function (data) {
                var result = data.field;
                console.log(result);
                $.ajax({
                    url: '/Admin/CommodityInfo/CreateCommodityInfo',
                    type: 'POST',
                    data: result,
                    success: function (res) {
                        if (res.code == 200) {

                            parent.reloadTable();//调用父级页面重载表单的方法

                            ////执行搜索重载
                            //parent.table.reload('currentTableId', {
                            //    page: {
                            //        curr: 1
                            //    }
                            //    , where: {}
                            //}, 'data');

                            var index = layer.alert(res.msg, {
                                title: '添加商品信息'
                            }, function () {
                                // 关闭弹出层
                                layer.close(index);
                                var iframeIndex = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(iframeIndex);
                            });
                        } else {
                            layer.alert(res.msg);
                        }
                    }
                })
                return false;
            });

        });</script>
</body>
</html>
